<!-- 编辑员工 -->
<template>
  <el-card style="max-width: 100%" shadow="always">
    <template #header>
      <el-page-header :icon="ArrowLeft" @back="() => $router.push('/crm/staff')">
        <template #content>
          <span class="text-large font-600 mr-3"> 编辑员工 </span>
        </template>
      </el-page-header>
    </template>
    <el-form :model="form" :rules="formRules" label-width="auto" style="max-width: 600px">
      <el-form-item label="员工姓名" prop="userId">
        <el-select v-model="form.userId" placeholder="请选择员工">
          <el-option v-for="item in userArr"
                     :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="deptId">
        <el-select v-model="form.deptId" placeholder="请选择所属部门">
          <el-option v-for="item in deptArr"
                     :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属角色" prop="roleId">
        <el-select v-model="form.roleId" placeholder="请选择所属角色">
          <el-option v-for="item in roleArr"
                     :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号">
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </template>
  </el-card>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import request from "@/utils/request";
import {useRoute, useRouter} from "vue-router";


const route = useRoute()
const router = useRouter()

//定义表单数据
const form = ref({
  userId: '',
  deptId: '',
  roleId: '',
  phone: '',

})

const formRules = ref({
  phone: [
    {pattern: /^1[3-9]\d{9}$/, message: '手机格式错误'}
  ]
})

const userArr = ref([])
const deptArr = ref([])
const roleArr = ref([])
const listData = () => {
  request.get('/api/crm/personnel/staff/dept/select').then(res => {
    deptArr.value = res.data
  })
  request.get('/api/crm/personnel/staff/roles/select').then(res => {
    roleArr.value = res.data
  })
  request.get('/api/crm/personnel/staff/users/select').then(res => {
    userArr.value = res.data
  })
}
onMounted(() => {
  listData()
})

watch(() => form.value.userId, (newVal) => {
  const selectedUser = userArr.value.find(user => user.id === newVal)
  if (selectedUser && selectedUser.phone) {
    form.value.phone = selectedUser.phone
  }
})

//提交表单
const onSubmit = () => {
  request.post('/api/crm/personnel/staff/add',form.value).then(res=>{
    ElMessage.success('修改成功')
    console.log(form.value)
    router.push('/crm/staff')
  })
}

//表单数据回显
const loadStaff = () => {
  let id = route.query.id
  request.get( '/api/crm/personnel/staff/selectById?id=' + id).then(res => {
    form.value = res.data;
  })
}
onMounted(() => {
  loadStaff()
})

//重置表单
const resetQuery = () => {
  form.value = {
    userId: '',
    deptId: '',
    roleId: '',
    phone: '',

  }
}
</script>

<style scoped>

</style>
